<template>
  <div v-loading="fullscreenLoading" class="about">
    <h1>随机妹子</h1>

    <a class="random" href="javascript:void (0)">
      <img :src="todos.url" alt="" />
      <button
        @click="GetMeizi"
        type="button"
        class="layui-btn layui-btn-sm layui-btn-primary"
      >
        <i class="layui-icon layui-icon-refresh-3"></i>
      </button>
      <p v-text="todos.desc"></p>
    </a>
  </div>
</template>

<script>
// import ElementUI from 'element-ui';
import axios from "axios";
// https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10

export default {
  name: "about",
  data() {
    return {
      todos: {},
      fullscreenLoading: true,
    };
  },
  created() {
    this.GetMeizi();
  },
  methods: {
    GetMeizi() {
      this.fullscreenLoading = true;
      axios({
        url: `https://gank.io/api/v2/random/category/Girl/type/Girl/count/1`,
      })
        .then((res) => {
          const { data } = res.data;
          this.todos = data[0];
          console.log(data[0]);
        })
        .catch((e) => {
          console.log(e);
          this.$message.error("出错误了");
        })
        .finally(() => {
          this.fullscreenLoading = false;
        });
    },
  },
};
axios({});
</script>

<style lang="stylus">
@import "~_layui@2.6.8@layui/dist/css/layui.css"

.random
  display block
.random img
  width 200px
  object-fit cover
</style>
